<template>
    <div class="resource">

        <div class="main">

          <div class="sort">

            <div>
                <a href="###"><span @click="video()">视频</span><i style="color:#26a2ff">{{videolen}}</i></a>
                <a href="###"><span @click="book()">书籍</span><i style="color:#26a2ff">{{booklen}}</i></a>
            </div>

            <div>
                <div v-show="show1" class="block1"></div>
                <div v-show="show2" class="block2"></div>
            </div>

          </div>

          <div v-show="show1" class="single" id="video">

            <ul class="list">
              <li class="show" v-for="(item,index) in List" :key="item.index" >
                <div class="photo">
                <img :src="item.resource.photo" alt="">
               
                </div>
                <div class="message">
                  <p>名字: {{item.resource.name}}</p>
                  <p>路径：{{item.resource.path}}<a href="###"></a></p>
                  <p class="more">简介：{{item.resource.introduction}}</p>
                  <p>上传时间：{{Time[index]}}</p>
                 
                  <router-link :to='"/userdetails/" + item.user.id'>
                  <p>
                    <img :src="item.user.photo" alt="">
                    
                    <a href="">{{item.user.name}}</a>
                  </p>
                  </router-link>
                </div>
                <a href="###" title="收藏" class="iconfont collect" @click="collect(index)"  v-if="!Favorite[index]">&#xe662;</a>
                <a href="###" title="取消收藏" class="iconfont collect" @click="collect(index)"  v-if="Favorite[index]" style="color: red">&#xe8c3;</a>
                <span class="icon">
                  <i><a href="###" class="iconfont" title="浏览量">&#xe65c;</a>{{item.resource.browse}}</i>
                  <i><a href="###" class="iconfont" title="评论" @click="Show(index)">&#xe6ab;</a>{{item.resource.comments}}</i>
                  <i v-if="!Statue[index]"><a href="###" class="iconfont" title="点赞" @click="god(index)">&#xe6d4;</a>{{item.resource.likes}}</i>
                  <i v-if="Statue[index]"><a href="###" class="iconfont" title="取消点赞" @click="god(index)" style="color:skyblue">&#xe6d5;</a>{{item.resource.likes}}</i>
                </span>

                <div class="comment" v-show="Shows[index]">
                  <ul>
                    <li v-show="!List[index].resource.comments"><p>暂无评论</p></li>
                    <li v-for="item in Listp" :key="item.index">
                      <p>
                        <router-link :to='"/userdetails/" + item.user.id'>
                          <img :src="item.user.photo" alt="">{{item.user.name}}：
                        </router-link>
                        {{item.comment.message}} 
                        <i>{{item.comment.createtime.slice(0,10)}}</i>
                      </p>
                    </li>
                    <li>
                      <input type="text" placeholder="发表评论" v-model="Sendmess">
                      <span @click="Send(index)"><a href="###">发送</a></span>
                    </li>
                  </ul>
                </div>
              </li>

              <p v-if="Loading" class="warn">加载中...</p>
              <p v-if="NoMore" class="warn">没有更多了</p>

            </ul>
            

          </div>

          <div v-show="show2" class="single" id="book">
            <ul>
                <li class="show" v-for="(item,index) in list" :key="item.index">
                  <div class="photo">
                  <img :src="item.resource.photo" alt="">
                  <!-- ../../../../../static/imgs/photo.jpeg -->
                  </div>
                  <div class="message">
                    <p>书名: {{item.resource.name}}</p>
                    <p>路径：{{item.resource.path}}<a href="###"></a></p>
                    <p class="more">简介：{{item.resource.introduction}}</p>
                    <p>上传时间：{{time[index]}}</p>                  <!-- <p>路径：<a href="###"></a></p> -->
                    <router-link :to='"/userdetails/" + item.user.id'>
                    <p>
                        <img :src="item.user.photo" alt="">
                        <!-- ../../../../../static/imgs/fans.jpg -->
                        <a href="">{{item.user.name}}</a>
                    </p>
                    </router-link>
                    
                  </div>
                  
                  <a href="###" class="iconfont collect" title="收藏" @click="add(index)" v-if="!favorite[index]">&#xe690;</a>
                  <a href="###" class="iconfont collect" title="取消收藏" @click="add(index)" v-if="favorite[index]" style="color: #FFD700">&#xe6ca;</a>
                  <span class="icon">
                    <i><a href="###" class="iconfont" title="浏览量">&#xe65c;</a>{{item.resource.browse}}</i>
                    <i><a href="###" class="iconfont" title="评论" @click="show(index)">&#xe6ab;</a>{{item.resource.comments}}</i>
                    <i v-if="!statue[index]"><a href="###" class="iconfont" title="点赞" @click="good(index)">&#xe6d4;</a>{{item.resource.likes}}</i>
                    <i v-if="statue[index]"><a href="###" class="iconfont" title="取消点赞" @click="good(index)" style="color:skyblue">&#xe6d5;</a>{{item.resource.likes}}</i>
                  </span>

                  <div class="comment" v-show="shows[index]">
                  <ul>
                    <li v-show="!list[index].resource.comments"><p>暂无评论</p></li>
                    <li v-for="item in listp" :key="item.index">
                      <p>
                        <router-link :to='"/userdetails/" + item.user.id'>
                          <img :src="item.user.photo" alt="">{{item.user.name}}：
                        </router-link>
                        {{item.comment.message}} 
                        <i>{{item.comment.createtime.slice(0,10)}}</i>
                      </p>
                    </li>
                    <li>
                      <input type="text" placeholder="发表评论" v-model="sendmess">
                      <span @click="send(index)"><a href="###">发送</a></span>
                    </li>
                  </ul>
                </div>
                
              </li>

              <p v-if="loading" class="warn">加载中...</p>
              <p v-if="noMore" class="warn">没有更多了</p>

          </ul>
          </div>
 
        </div>

    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import Vue from 'vue'
export default {
    name: 'resource',
    data() {
      return {
        show1: true,
        show2: false,
        change: true,
        List: [],
        list: [],
        Listp: [],
        listp: [],
        Favorite: [],
        favorite: [],
        Time: [],
        time: [],
        Statue: [],
        statue: [],
        Shows: [],
        shows: [],
        user: [],
        Sendmess: '',
        sendmess: '',
        count: 1,

        Loading: true,
        NoMore: false,
        Page: 1,
        loading: true,
        noMore: false,
        page: 1,

        videolen: '',
        booklen: '',
      }
    },

    mounted () {
      // 获取可视区域的高度
      var clientHeight = document.documentElement.clientHeight || document.body.clientHeight
      // 窗口内容实际高度
      var heightv = document.getElementById("video").clientHeight
      var heightb = document.getElementById("book").clientHeight

      var _this = this
      document.addEventListener('scroll', function () {
        // console.log("show1,show2",_this.show1,_this.show2)
        // console.log(window.pageYOffset,clientHeight,heightv)
        if (window.pageYOffset >= clientHeight + heightv + 600 && _this.show1 == true) {
          _this.Page ++
          // console.log(pag)
          // console.log(_this.page)

          let postData = qs.stringify({
            option: 0,
            page: _this.Page,
          })

          axios.post(`/api/resource`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              var newlist = response.data
              if(newlist.length < 15) {
                _this.Loading = false
                _this.NoMore = true
              }

              // console.log(newlist)
              for (var i = 0; i < newlist.length; i++) {
                _this.List.push(newlist[i])
                _this.videolen = _this.List.length

                _this.Time.push(newlist[i].resource.createtime.slice(0,10))
                _this.Favorite.push(newlist[i].favorite)
                _this.Statue.push(newlist[i].statue)
                _this.Shows.push(false)
              }
              // console.log(_this.Favorite)
            } 
          })

        }
        else if (window.pageYOffset >= clientHeight + heightb + 600 && _this.show1 == false){
          _this.page ++
          // console.log(pag)
          // console.log(_this.page)

          let postData = qs.stringify({
            option: 1,
            page: _this.page,
          })

          axios.post(`/api/resource`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              var newlist = response.data
              if(newlist.length < 15) {
                _this.loading = false
                _this.noMore = true
              }

              // console.log(newlist)
              for (var i = 0; i < newlist.length; i++) {
                _this.list.push(newlist[i])
                _this.booklen = _this.list.length

                _this.time.push(newlist[i].resource.createtime.slice(0,10))
                _this.favorite.push(newlist[i].favorite)
                _this.statue.push(newlist[i].statue)
                _this.shows.push(false)
                
              }
              // console.log(_this.favorite)
            } 
          })

        }
      })

    },

    methods: {

      video() {
        this.show1 = true

        this.show2 = false
        // console.log("show1,show2",this.show1,this.show2)
      },

      book() {
        this.show2 = true

        this.show1 = false
        // console.log("show1,show2",this.show1,this.show2)
      },

      collect(index) {
        if (this.user != "") {
          if (this.Favorite[index] == 0) {
            this.Favorite[index] = !this.Favorite[index]
            let newItem = this.Favorite[index]
            Vue.set(this.Favorite, index, newItem)
          
            let postData = qs.stringify({
              rid: this.List[index].resource.id,
              favorite: 0,
            })

            axios.post(`/api/favoriteR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
              }

            })
          }else {
            this.Favorite[index] = !this.Favorite[index]
            let newItem = this.Favorite[index]
            Vue.set(this.Favorite, index, newItem)
            
            let postData = qs.stringify({
              rid: this.List[index].resource.id,
              favorite: 1,
            })

            axios.post(`/api/favoriteR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
              }

            })

          }
        }
        else {
          this.$message({
            type: 'error',
            message: "请先登录！"
          })
        }
          
      }, 

      add(index) {

        if (this.user != "") {
          if (this.favorite[index] == 0) {
            this.favorite[index] = !this.favorite[index]
            let newItem = this.favorite[index]
            Vue.set(this.favorite, index, newItem)
          
            let postData = qs.stringify({
              rid: this.list[index].resource.id,
              favorite: 0,
            })

            axios.post(`/api/favoriteR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
              }

            })
          }else {

            this.favorite[index] = !this.favorite[index]
            let newItem = this.favorite[index]
            Vue.set(this.favorite, index, newItem)
            
            let postData = qs.stringify({
              rid: this.list[index].resource.id,
              favorite: 1,
            })

            axios.post(`/api/favoriteR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
              }

            })

          }
        }
        else {
          this.$message({
            type: 'error',
            message: "请先登录！"
          })
        }
      },

      god (index) {
        if (this.user != "") {
          if (this.Statue[index] == 0) {
            this.Statue[index] = !this.Statue[index]
            let newItem = this.Statue[index]
            Vue.set(this.Statue, index, newItem)
          
            let postData = qs.stringify({
              rid: this.List[index].resource.id,
              statue: 0,
            })

            axios.post(`/api/likeR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
                this.List[index].resource.likes ++
              }

            })
          }else {
            this.Statue[index] = !this.Statue[index]
            let newItem = this.Statue[index]
            Vue.set(this.Statue, index, newItem)
          
            let postData = qs.stringify({
              rid: this.List[index].resource.id,
              statue: 1,
            })

            axios.post(`/api/likeR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
                this.List[index].resource.likes --
              }

            })

          }
        }
        else {
          this.$message({
            type: 'error',
            message: "请先登录！"
          })
        }
        // console.log(this.Statue[index])
      },

      good (index) {
        if (this.user != "") {
          if (this.statue[index] == 0) {
            this.statue[index] = !this.statue[index]
            let newItem = this.statue[index]
            Vue.set(this.statue, index, newItem)
          
            let postData = qs.stringify({
              rid: this.list[index].resource.id,
              statue: 0,
            })

            axios.post(`/api/likeR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
                this.list[index].resource.likes ++
              }

            })
          }else {
            this.statue[index] = !this.statue[index]
            let newItem = this.statue[index]
            Vue.set(this.statue, index, newItem)
          
            let postData = qs.stringify({
              rid: this.list[index].resource.id,
              statue: 1,
            })

            axios.post(`/api/likeR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
                this.list[index].resource.likes --
              }

            })

          }
        }
        else {
          this.$message({
            type: 'error',
            message: "请先登录！"
          })
        }
      },

      Show (index) {
        if (this.Shows[index] == false) {
          for (var i = 0; i < this.List.length; i++) {
            this.Shows[i] = false
            this.Shows[index] = true
            let newItem = this.Shows[index]
            Vue.set(this.Shows, index, newItem)
          }

        } else {
          for (var i = 0; i < this.List.length; i++) {
            this.Shows[i] = false
            // this.Shows[index] = true
            let newItem = this.Shows[index]
            Vue.set(this.Shows, index, newItem)
          }

        }

        let postData = qs.stringify({
          page: 1,
        })

          let id = this.List[index].resource.id

        axios.post(`/api/resource/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            this.Listp = response.data
            console.log(this.listp)
          } 
        })
        
      },

      Send (index) {
        if (this.user != "") {
          let postData = qs.stringify({
            message: this.Sendmess,
          })

          let id = this.List[index].resource.id

          axios.post(`/api/resource/${id}/write`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              console.log(response.data)
              let postData = qs.stringify({
                page: 1,
              })

                let id = this.List[index].resource.id

              axios.post(`/api/resource/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                if (response.status === 200) {
                  this.Listp = response.data
                  this.Sendmess = ""
                  this.List[index].resource.comments ++
                  console.log(this.listp)
                } 
              })
            } 

          })
          this.$message({
            type: 'success',
            message: "发表成功！"
          })
        }
        else {
          this.$message({
            type: 'error',
            message: "请先登录！"
          })
        }
      },
      

      show (index) {
        if (this.shows[index] == false) {
          for (var i = 0; i < this.list.length; i++) {
            this.shows[i] = false
            this.shows[index] = true
            let newItem = this.shows[index]
            Vue.set(this.shows, index, newItem)
          }

        } else {
          for (var i = 0; i < this.list.length; i++) {
            this.shows[i] = false
            let newItem = this.shows[index]
            Vue.set(this.shows, index, newItem)
          }

        }

        let postData = qs.stringify({
          page: 1,
        })

          let id = this.list[index].resource.id

        axios.post(`/api/resource/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            this.listp = response.data
            console.log(this.listp)
          } 
        })
        
      },

      send (index) {
        if (this.user != "") {
          let postData = qs.stringify({
            message: this.sendmess,
          })

          let id = this.list[index].resource.id

          axios.post(`/api/resource/${id}/write`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              console.log(response.data)
              let postData = qs.stringify({
                page: 1,
              })

                let id = this.list[index].resource.id

              axios.post(`/api/resource/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                if (response.status === 200) {
                  this.listp = response.data
                  this.sendmess = ""
                  this.list[index].resource.comments ++
                  console.log(this.listp)
                } 
              })
              
            } 

          })
          this.$message({
            type: 'success',
            message: "发表成功！"
          })
        }
        else {
          this.$message({
            type: 'error',
            message: "请先登录！"
          })
        }
      },

    },

    created () {
      axios.post(`/api/user/getUser`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          if (response.data !== "") {
            this.user = response.data
          }
        } 

      })

      let postData = qs.stringify({
        option: 0,
        page: this.Page,
      })

      axios.post(`/api/resource`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          this.List = response.data
          this.videolen = this.List.length
          // console.log(this.List)
          for (var i = 0; i < this.List.length; i++) {
            
                this.Time.push(this.List[i].resource.createtime.slice(0,10))
                this.Favorite.push(this.List[i].favorite)
                this.Statue.push(this.List[i].statue)
                this.Shows.push(false)
            
          }
          // console.log(this.Favorite)
        } 
      })

      let postDatab = qs.stringify({
        option: 1,
        page: this.page,
      })

      axios.post(`/api/resource`, postDatab, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          this.list = response.data
          this.booklen = this.list.length

          for (var i = 0; i < this.list.length; i++) {
           
                this.time.push(this.list[i].resource.createtime.slice(0,10))
                this.favorite.push(this.list[i].favorite)
                this.statue.push(this.list[i].statue)
                this.shows.push(false)
                // console.log(response.data)
                // console.log(response.data.statue)

            // console.log(response.data)
            
          }
          // console.log(this.list)
          // console.log(this.statue)
          // console.log(this.favorite)
        } 
      })

    },

}
</script>

<style lang="stylus" scoped>
.resource
  width 100%
  min-height 36rem
  margin-top 5rem
  position relative
  //background-color red
  .main
    width 80%
    height auto
    position absolute 
    left 13%
    font-size .9rem
    margin-bottom 2rem
    background-color #fff
    .sort
      width 80%
      height 4rem
      position fixed
      top 4rem
      z-index 10
      border-bottom .05rem #ccc solid
      background-color #fff
      box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
      span
        width 4%
        line-height 1.5rem
        text-align center
        display inline-block
        margin-top 1.5rem
        margin-left 5rem
        // background-color red
      .block1
        width 4%
        height .2rem
        position absolute
        margin-top .8rem
        border-radius 20%
        margin-left 5rem
        display inline-block
        background-color skyblue
      .block2
        width 4%
        height .2rem
        position absolute
        margin-top .8rem
        border-radius 20%
        margin-left 14.2rem
        display inline-block
        background-color skyblue
    .single
      width 100%
      min-height 36rem
      margin-top 2rem
      //background-color red
      ul
        height auto
        padding-top 1rem
        padding-left 1rem
        padding-bottom 2rem
        // background-color red
        .warn
          width 100%
          text-align center
          margin-top 1rem
          // background-color red
        .show
          width 96%
          margin-left 2%
          height auto
          margin-top 1rem
          border .05rem #eee solid
          border-radius 10px
          box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
          position relative
          background-color #fff
          .photo
            width 6%
            height 4rem
            left 4%
            position absolute
            background-color #fff
            top 1.8rem
            img 
              height 200%
              width 200%
              margin-top -.7rem
              box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
          .message
            width 65%
            height auto
            left 18%
            padding-top .8rem
            position relative
            // background-color red
            p
              line-height 1.4rem
              font-size .8rem
              position relative
              margin-bottom .3rem
              // background-color red
              img
                height 1.3rem
                width 3%
                margin-left 0%
                border-radius 50%
                border .05rem #ccc solid
                box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
              a
                position absolute 
                left 2rem
                top .2rem
                font-size .7rem
          .collect
            position absolute
            top 2.5rem
            left 75%
            font-size 1.8rem
            // background-color red
            margin-left 15%
          .icon
            width 30%
            position absolute 
            top 8rem
            left 80%
            // background-color skyblue
            i  
              margin-right 1rem
              font-size .8rem
              color #26a2ff
              // background-color red
          .comment
            width 100%
            height auto
            margin-top 1rem
            position relative
            border-top .1rem #ccc solid
            // background-color red
            ul
              height auto
              li
                width 100%
                font-size .8rem
                margin-bottom .5rem
                // background-color #fff
                p
                  width 100%
                  text-indent 2.5rem
                  img
                    height 1.2rem
                    width 1.5%
                    margin-left 0%
                    border-radius 50%
                  i
                    font-size .7rem
                    color #ccc
                input 
                  width 80%
                  margin-left 2.5rem
                  position absolute
                  bottom .5rem
                  text-indent 1.5rem
                  font-size .8rem
                  border .05rem #ccc solid
                span
                  padding 0rem 1rem
                  position absolute
                  bottom .5rem
                  left 90%                  
                  border .05rem #ccc solid
                  background-color #fff
                  a
                    color #26a2ff
                span:hover
                  background-color skyblue
                  a
                    color #fff
</style>